import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { differenceInCalendarDays } from 'date-fns';

@Component({
  selector: 'app-basic-analysis',
  templateUrl: './basic-analysis.component.html',
  styleUrls: ['./basic-analysis.component.scss'],
  providers: [
    DatePipe
  ]
})
export class BasicAnalysisComponent implements OnInit {
  today = new Date();
  currentMonth = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-1`;
  searchParams = {
    start_date: this.datePipe.transform(this.currentMonth, 'yyyy-MM-dd HH:mm:ss'),
    end_date: this.datePipe.transform(this.today, 'yyyy-MM-dd HH:mm:ss'),
    doctor: '全部',
    department: '全部',
    type: '全部',
    '病人性质': '全部'
  };
  anySearchRes = {
    start_date: this.datePipe.transform(this.currentMonth, 'yyyy-MM-dd HH:mm:ss'),
    end_date: this.datePipe.transform(this.today, 'yyyy-MM-dd HH:mm:ss'),
    doctor: '全部',
    department: '全部',
    type: '全部',
    '病人性质': '全部'
  };
  resultsObj = null;
  keshiOptions = [];
  yishengOptions = [];
  bingOptions: any;
  genderOptions: any;
  ageOptions: any;
  chufangOptions: any;
  feiyongOptions: any;
  chufangTableData = {};
  constructor(public http: HttpClient, public datePipe: DatePipe) {
    this.onSubmit();
  }

  disabledDate = (current: Date): boolean => {
    // Can not select days before today and today
    return differenceInCalendarDays(current, this.searchParams['start_date']) < 0 || differenceInCalendarDays(current, this.searchParams['start_date']) === 0;
  }

  /**
   * @description 搜索方法
   */
  onSubmit() {
    this.searchParams.start_date = this.datePipe.transform(this.searchParams['start_date'], 'yyyy-MM-dd HH:mm:ss');
    this.searchParams.end_date = this.datePipe.transform(this.searchParams['end_date'], 'yyyy-MM-dd HH:mm:ss');
    this.anySearchRes = JSON.parse(JSON.stringify(this.searchParams));
    const params = {
      params: this.searchParams
    };
    this.http.get(window.API_ROOT + 'api/statistics/basic', params).toPromise().then((res: any) => {
      console.log(res);
      this.resultsObj = res.data;
      this.createBingren();
      this.createGender();
      this.createAge();
      this.createChufang();
    });
  }

  /**
  * @description 获取科室
  */
  getKeshi() {
    const params = {
      params: {
        value: ''
      }
    };
    this.http.get(window.API_ROOT + 'api/recipes/departments', params).toPromise().then((res: any) => {
      console.log(res);
      this.keshiOptions = res.data;
    });
  }
  /**
  * @description 获取医生
  */
  getYisheng() {
    const params = {
      params: {
        '科室': this.searchParams['department']
      }
    };
    this.http.get(window.API_ROOT + 'api/recipes/doctors', params).toPromise().then((res: any) => {
      console.log(res);
      this.yishengOptions = res.data;
    });
  }

  /***
   * 病人性质分布
   */
  createBingren() {
    this.bingOptions = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {d}%'
      },
      color: ['#4F81BC', '#C0504E'],
      series: [{
        data: this.resultsObj['病人性质'].data,
        type: 'pie',
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}\n\n {d}%',
              textStyle: { // 数值样式
                color: '#fff',
                fontSize: 16
              }
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      }]
    };
  }

  /**
	 * @description 性别分布生成
	 */
  createGender() {
    this.genderOptions = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {d}%'
      },
      color: ['#4F81BC', '#C0504E'],
      series: [{
        data: this.resultsObj['性别分布'].data,
        type: 'pie',
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}\n\n {d}%',
              textStyle: { // 数值样式
                color: '#fff',
                fontSize: 16
              }
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      }]
    };
  }

  /**
   * @description 年龄分布
   */
  createAge() {
    this.ageOptions = {
      tooltip: {
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: this.resultsObj['年龄分布'].name,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: 50,
          data: this.resultsObj['年龄分布'].data,
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ['#C0504E', '#FFC000', '#01B0F1'];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: 'right',
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
      ]
    };
  }

  /**
   * @description 处方类型分布
   */
  createChufang() {
    this.chufangOptions = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      color: ['#C0504E', '#FFC000', '#01B0F1'],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
      },
      yAxis: {
        type: 'category',
        data: this.resultsObj['处方类型分布'].name,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: 50,
          data: this.resultsObj['处方类型分布'].data,
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ['#4F81BC', '#B8DEE9', '#FFC000', '#00AF50', '#C00000'];
                return colorList[params.dataIndex];
              }
            }
          }
        }
      ]
    };
    console.log(this.resultsObj);
    this.chufangTableData = this.resultsObj['饮片类型分布-明细'];
  }
  /**
 * @description 费用占比分布
 */
  createFeiyong() {
    this.feiyongOptions = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
      },
      color: ['#4F81BC', '#C0504E', '#9BBB58', '#8165A2', '#4AACC5'],
      series: [
        {
          name: '费用占比分布',
          type: 'pie',
          radius: ['20%', '60%'],
          avoidLabelOverlap: true,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                formatter: '{b}{d}%',
                textStyle: { // 数值样式
                  color: '#000',
                  fontSize: 16
                }
              },
            }
          },
          labelLine: {
            normal: {
              show: true,
              length2: '200'
            }
          },
          data: this.resultsObj['费用占比分布'].data
        }
      ]
    };
  }

  ngOnInit() {
    this.getKeshi();
    this.getYisheng();
  }

}
